/**
 * 页面切换动画和状态管理样式
 * 提供平滑的页面切换效果和状态管理
 */

/* 页面切换动画 */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.page-transition.page-entering {
    opacity: 1;
    transform: translateY(0);
}

.page-transition.page-exiting {
    opacity: 0;
    transform: translateY(-20px);
}

/* 页面加载动画 */
.page-loading {
    position: relative;
    min-height: 400px;
}

.page-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.page-loading::after {
    content: '\e63d';
    font-family: layui-icon !important;
    font-size: 24px;
    color: #009688;
    animation: layui-rotate 1s infinite linear;
}

/* 内容区域动画 */
.content-wrapper {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 卡片动画 */
.layui-card {
    animation: cardSlideIn 0.6s ease-out;
    animation-fill-mode: both;
}

.layui-card:nth-child(1) { animation-delay: 0.1s; }
.layui-card:nth-child(2) { animation-delay: 0.2s; }
.layui-card:nth-child(3) { animation-delay: 0.3s; }
.layui-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 按钮动画 */
.layui-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.layui-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.layui-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.layui-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.layui-btn:active::before {
    width: 300px;
    height: 300px;
}

/* 表格动画 */
.layui-table-view {
    animation: tableFadeIn 0.8s ease-out;
}

@keyframes tableFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 图表动画 */
.echarts-container {
    animation: chartZoomIn 0.7s ease-out;
}

@keyframes chartZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 导航菜单动画 */
.layui-nav-item {
    transition: all 0.3s ease;
}

.layui-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.layui-nav-child {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 侧边栏折叠动画 */
.layui-side {
    transition: all 0.3s ease;
}

.layui-side.collapsed {
    transform: translateX(-100%);
}

/* 移动端菜单动画 */
.layui-layout-shade {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 状态管理样式 */
.state-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    animation: pulse 2s infinite;
}

.state-indicator.online {
    background-color: #5FB878;
}

.state-indicator.offline {
    background-color: #FF5722;
}

.state-indicator.warning {
    background-color: #FFB800;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 加载状态 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #009688;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 成功状态 */
.success-bounce {
    animation: bounce 0.6s ease-out;
}

@keyframes bounce {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* 警告状态 */
.warning-flash {
    animation: flash 1s ease-in-out infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 数据更新动画 */
.data-updating {
    position: relative;
}

.data-updating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 150, 136, 0.1), transparent);
    animation: dataUpdate 1.5s ease-in-out;
}

@keyframes dataUpdate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 页面切换遮罩 */
.page-transition-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: maskFadeIn 0.3s ease-out;
}

@keyframes maskFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 响应式动画调整 */
@media (max-width: 768px) {
    .layui-card {
        animation: mobileCardSlideIn 0.5s ease-out;
    }
    
    @keyframes mobileCardSlideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .content-wrapper {
        animation: mobileFadeInUp 0.4s ease-out;
    }
    
    @keyframes mobileFadeInUp {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* 性能优化 */
.page-transition,
.content-wrapper,
.layui-card,
.layui-table-view,
.echarts-container {
    will-change: transform, opacity;
}

/* 减少动画对性能的影响 */
@media (prefers-reduced-motion: reduce) {
    .page-transition,
    .content-wrapper,
    .layui-card,
    .layui-btn,
    .layui-nav-item,
    .layui-nav-child,
    .layui-table-view,
    .echarts-container {
        animation: none !important;
        transition: none !important;
    }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
    .page-loading::after {
        color: #01AAED;
    }
    
    .loading-spinner {
        border-color: #2F4056;
        border-top-color: #01AAED;
    }
}